<nav id="header" class="bg-white dark:bg-black fixed w-full z-10 top-0 shadow">

  <div id="progress" class="h-1 z-20 top-0" style="background:linear-gradient(to right, #4dc0b5 var(--scroll), transparent 0);"></div>

  <div class="w-full container mx-auto flex flex-wrap items-center justify-between my-1">
      <div class="pl-4">
          <a class="text-base no-underline hover:no-underline font-bold text-xl"  href="/">
              {{ $.Site.Title }}
          </a>
      </div>

      <div class="block lg:hidden pr-4">
          <button id="nav-toggle" class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-600 hover:text-gray-900 hover:border-teal-500 appearance-none focus:outline-none">
              <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
          </button>
      </div>

      <div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block mt-2 lg:mt-0 bg-gray-100 dark:bg-black md:bg-transparent z-20" id="nav-content">
          <ul class="list-reset lg:flex justify-end flex-1 items-center">
                {{- range $item := $.Site.Params.NavItems }}
                    <li class="mr-3">
                    <a href="{{ index $item 1 }}" class="inline-block py-2 px-2 text-gray-700 dark:text-gray-300 font-bold no-underline">{{ index $item 0 }}</a>
                    </li>
                {{- end }}
                <button id="switchTheme" class="h-10 w-10 flex justify-center items-center focus:outline-none">
                    <div id="dark-icon" class="hidden">
                        <svg data-v-297af853="" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6"><title data-v-297af853="">Dark Mode</title> <path data-v-297af853="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
                    </div>
                    <div id="light-icon">
                        <svg data-v-297af853="" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6"><title data-v-297af853="">Light Mode</title> <path data-v-297af853="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
                    </div> 
                </button>
          </ul>
      </div>
  </div>
</nav>